import React, { useState, useEffect, useRef } from 'react'
// 引入ant组件
import { Collapse, Form, Input, Select, Button, Table, Divider, Pagination, message, Popconfirm } from 'antd'
// 引入样式
import './index.less'
// 引入接口
import { tableList, editItem, deleteItem } from '@/api/product'
// 引入修改组件
import ProductEdit from './components/edit'
// 解构 cloumn
const { Column } = Table

const Product = (props) => {
    // state 申明
    const [list, setList] = useState([]) // 列表数据
    const [loading, setLoading] = useState(false) // 加载状态
    const [total, setTotal] = useState(0) // 列表总数
    const [pageNumber, setPageNumber] = useState(1) // 当前页码
    const [pageSize, setPageSize] = useState(10) // 每页显示条数
    const [query, setQuery] = useState({ title: '', status: '', star: '' }) // 请求参数 包含 商品 状态 推荐指数
    const [visible, setVisible] = useState(false) // 修改弹框的状态
    const [curRow, setCurRow] = useState({}) // 修改弹框的状态
    const [selectedRowKeys, setSelectedRowKeys] = useState([]) // 修改弹框的状态
    const [selectedRows, setSelectedRows] = useState([]) // 修改弹框的状态


    // ref 声明
    const editRef = useRef()

    // 初始化执行
    useEffect(() => {
        queryList()
    }, [])

    // 方法
    function rowChange(selectedRowKeys, selectedRows, info) {
        // 更新 selectedRowKeys
        setSelectedRowKeys(selectedRowKeys)
        // 更新 selectedRows
        setSelectedRows(selectedRows)
    }
    function queryList() {
        setLoading(true) // true 代表正在请求
        // pageNumber, pageSize, title, status, star 
        const params = {
            pageNumber, // 当前页码 
            pageSize,  // 当前页显示条数
        }
        tableList(Object.assign(params, query)).then(data => {
            const { data: { data: { items, total } } } = data
            // 更新列表数据
            setList(items)
            // 改变total
            setTotal(total)
            setLoading(false) // false 代表请求结束
        })
    }
    function edit(row) { // 修改
        setCurRow(row)
        setVisible(true)
    }
    function del(row) { // 删除
        // 点击删除 我们希望客户可以再确认下  弹出二次确认弹框
        // 点击确认之后调用删除接口
        deleteItem({ id: row.id }).then(({ data: { code } }) => {
            console.log(code)
            // 根据删除接口的反馈来提示 删除成功与否
            if (code === 20000) {
                message.success('删除成功！')
                // 调用 列表接口 去让列表更新
                queryList()
            } else {
                message.success('删除失败！')
            }
        })

    }
    function search() { // 搜索
        queryList()
    }
    function changPage(page, pageSize) { // 页码改变
        setPageNumber(page)
        queryList()
    }
    function sizeChange(current, size) { // 显示条数改变
        setPageSize(size)
        queryList()
    }
    function titleChange(event) { // 商品改变事件
        const title = event.target.value
        setQuery(() => Object.assign(query, { title }))
    }
    function statusChange(status) { // 状态改变事件
        setQuery(() => Object.assign(query, { status }))
    }
    function starChange(star) { // 推荐指数改变事件
        setQuery(() => Object.assign(query, { star }))
    }
    function cancel() { // 修改弹框的取消事件
        setVisible(false)
    }
    function confirm() { // 修改弹框的确认事件
        // setVisible(false)
        console.log(editRef)
        // 触发 弹框中form 表单的校验
        editRef.current.validateFields((err, values) => {
            console.log(err, values)
            // 校验成功 则 请求编辑接口
            if (!err) {
                // 需要处理下date,转换成字符串
                const params = {
                    ...values,
                    date: values['date'].format('YYYY-MM-DD HH:mm:ss')
                }
                editItem(params).then(({ data: { code } }) => {
                    console.log(code)
                    // 请求编辑接口成功之后则更新列表 也就是调用 queryList
                    if (code === 20000) {
                        // 需要关闭弹框
                        setVisible(false)
                        message.success('修改成功！')
                        queryList()
                    } else {
                        message.error('修改失败！')
                    }
                })
            }
        })

    }
    function exportZip() { //导出压缩文件
        // 根据列表选择的数据条数去做导出 没有选择数据 则 提示选择数据 , 选择了数据则导出选择的数据的压缩包
        if (!selectedRows.length) {
            message.warning('请选择数据后再导出！')
            return
        }
        // 导出会单独抽成一个方法来做 用到 zip 这个插件
        import('@/lib/exportZip').then(zip => {
            const th = ['ID', '商品', '客户', '购买量', '推荐指数', '状态', '时间'];
            const filterVal = ['id', 'title', 'author', 'readings', 'star', 'status', 'date'];
            // formatJson 的 第二个参数传的是列表选中的数据
            const jsonData = formatJson(filterVal, selectedRows);
            const txtName = 'product_txt'
            const zipName = 'product_zip'
            zip.export_txt_to_zip(th, jsonData, txtName, zipName)
        })
    }
    function formatJson(filterVal, list) { // 将导出数据过滤成json格式
        return list.map(item => filterVal.map(val => item[val]))
    }
    return (<div className='product'>
        {/* 筛选项 */}
        <Collapse defaultActiveKey={['search']}>
            <Collapse.Panel header='筛选' key='search'>
                <Form layout='inline'>
                    <Form.Item label='商品'>
                        {/* 商品 */}
                        <Input onChange={titleChange} placeholder='请输入商品' />
                    </Form.Item>
                    <Form.Item label='状态'>
                        {/* 状态 "published", "noPublished"*/}
                        <Select style={{ width: 120 }} onChange={statusChange}>
                            <Select.Option value=''>全部</Select.Option>
                            <Select.Option value="published">发布</Select.Option>
                            <Select.Option value="noPublished">未发布</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label='推荐指数'>
                        {/* 推荐指数 ★ ★★ ★★★*/}
                        <Select style={{ width: 120 }} onChange={starChange}>
                            <Select.Option value=''>全部</Select.Option>
                            <Select.Option value={1}>★</Select.Option>
                            <Select.Option value={2}>★★</Select.Option>
                            <Select.Option value={3}>★★★</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary' onClick={search}>搜索</Button>
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary' onClick={exportZip}>导出ZIP文件</Button>
                    </Form.Item>
                </Form>
            </Collapse.Panel>
        </Collapse>
        {/* 列表项 */}
        <br />
        {/* 列表 */}
        <Table bordered rowKey='id' rowSelection={{ selectedRowKeys, onChange: rowChange }} dataSource={list} loading={loading} pagination={false}>
            <Column title='ID' dataIndex='id' key='id' width={70} align='center' />
            <Column title='商品' dataIndex='title' key='title' width={130} align='center' />
            <Column title='客户' dataIndex='author' key='author' align='center' />
            <Column title='购买量' dataIndex='readings' key='readings' align='center' />
            <Column title='推荐指数' dataIndex='star' key='star' width={130} align='center' render={(text, row) => (
                <span>{typeof text === 'number' ? ''.padStart(text, '★') : text} </span>
            )} />
            <Column title='状态' dataIndex='status' key='status' align='center' render={(text, row) => (
                // 要格式化后端传 状态 转为中文 和搜索项保持一致
                <span>{text === 'published' ? '发布' : '未发布'}</span>
            )} />
            <Column title='时间' dataIndex='date' key='date' align='center' />
            <Column title='操作' key='action' align='center' render={(text, row) => (
                <span>
                    <Button type='primary' shape='circle' icon='edit' title='修改' onClick={() => edit(row)} />
                    <Divider type='vertical' />
                    <Popconfirm
                        title="您确认要删除这条数据吗?"
                        onConfirm={() => del(row)}
                        okText="确认"
                        cancelText="取消"
                    >
                        <Button shape='circle' icon='delete' title='删除' />
                    </Popconfirm>
                </span>
            )} />
        </Table>
        <br />
        {/* 分页组件 */}
        <Pagination
            total={total}
            current={pageNumber}
            pageSize={pageSize}
            pageSizeOptions={['10', '20', '30', '40']}
            showTotal={(total) => `共${total}条数据`}
            showSizeChanger
            showQuickJumper
            onChange={changPage}
            onShowSizeChange={sizeChange}
        />
        {/* 修改弹框组件 */}
        <ProductEdit ref={editRef} curRow={curRow} visible={visible} cancel={cancel} confirm={confirm} />
    </div>)
}

export default Product